<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
        <img :src=" $baseUrl + item.img" alt />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from "swiper"; // 注意引入的是Swiper
import "swiper/css/swiper.min.css"; // 注意这里的引入
export default {
  data() {
    return {
      //banner的数据
      bannerList: []
    };
  },
  mounted() {
    /* 
    1.请求数据--跨域
    2.解决：配置vue.config.js  
    3.图片出不来，路径不对
    4.解决：拼接一个正确的路径
    5.轮播图不滚了-- axios是异步的，滚动执行的时候，数据还没有回来，结构还没有
    6.解决：DOM渲染完了以后再去滚动
    */
    //1.发起请求，请求banner数据
    this.axios
      .get("/ujiuye/api/getbanner")
      .then(res => {
        //2.获取到数据
        console.log(res);
        if (res.data.code == 200) {
          //成功了
          //3.更新本地的bannerList数据
          this.bannerList = res.data.list;

          //方式一
          //4. this.$nextTick(callback)DOM渲染完了去调用回调函数  
          // this.$nextTick(() => {
          //   //4.DOM渲染完了以后再去滚动
          //   new Swiper(".swiper-container", {
          //     loop: true, // 循环模式选项
          //     autoplay: true, // 自动播放

          //     // 如果需要分页器
          //     pagination: {
          //       el: ".swiper-pagination"
          //     }
          //   });
          // });
        } else {
          console.log(res.data.msg);
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  updated(){
    //4.DOM渲染完了以后再去滚动
    new Swiper(".swiper-container", {
        loop: true, // 循环模式选项
        autoplay: true, // 自动播放

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination"
        }
      });
  }
  }
</script>

<style scoped>
.swiper-container {
  width: 100vw;
  height: 2.5rem;
}
.swiper-slide img {
  width: 100vw;
  height: 2.5rem;
}
</style>